<template>
  <!-- 柱状图 -->
  <div ref="pv" style="width: 100%; height: 500px"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    const myChart = echarts.init(this.$refs.pv);
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          // data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)',
          },
        },
      ],
    };
    myChart.setOption(option);
    // setTimeout(() => {
    //   myChart.setOption({
    //     series: [
    //       {
    //         data: [200, 150, 80, 70, 110, 130, 200],
    //       },
    //     ],
    //   });
    // }, 3000);
    this.$http.post('/api/echarts').then((ret) => {
      if (ret.code === 0) {
        myChart.setOption({
          series: [
            {
              data: ret.data.map((item) => {
                return item.data;
              }),
            },
          ],
        });
      }
    });
  },
};
</script>

<style></style>
